<template>
  <div>
    <Head></Head>
  <el-table
    :data="returnDTO"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="returnSerial"
      label="退货编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="returnPrice"
      label="总金额"
      width="120">
    </el-table-column>
    <el-table-column
      prop="orderSerial"
      label="订单编号"
      width="300">
    </el-table-column>
    <el-table-column
      prop="returnStatus"
      label="退货状态"
      width="120">
    </el-table-column>
    <el-table-column
      prop="returnCreateTime"
      label="退货时间"
      width="300">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row.returnSerial,scope.row.returnPrice)" type="text" 
        size="small" v-if="scope.row.returnStatus=='已通过'">退款</el-button>
      </template>
    </el-table-column>
  </el-table>

    <div class="block" style="width:20%;margin-left:70%">
    <el-pagination
      :current-page="pageInfo.page"
    :total="pageInfo.total"
    :page-size="pageInfo.size"
    @current-change="currentchange"
      layout="prev, pager, next, jumper"
      >
    </el-pagination>
  </div>

  


  </div>
</template>

<script>
import Head from "../cart/head"
import {mapState} from 'vuex'
import {mapActions} from 'vuex'
export default {
  components: {
     Head,
  },
    computed:{
      ...mapState("Return",["returnDTO","pageInfo"]),
      ...mapState("cart", ["user"])
    },
  data(){
        return{
          info:{
            userId:0,
            page:1,
            size:2
          },
          ReturnMonDTO:{
            Serial:"YC123456",
            returnSerial:"",
            money:0
          }
          
        }
    },
  created(){
    //该处做预加载
    
    this.info.userId=this.user.userId;
    this.select({userId:this.info.userId,page:1,size:5});
  },
  methods:{
    currentchange(current){
       this.select({userId:this.info.userId,page:current,size:5});
     },
    handleClick(returnSerial,allMoney){
      //  console.log(returnSerial);
      //  console.log(allMoney);
      this.ReturnMonDTO.returnSerial=returnSerial;
      this.ReturnMonDTO.money=allMoney;
       //该处调用退款mq
        this.send(this.ReturnMonDTO);

    },
   ...mapActions("Return",["select","send"])
  },
 

}
</script>

<style>

</style>